<template>
  <el-card>
    <div class="table">
      <el-button type="primary" @click="dialogVisible = true">新增商品类别</el-button>

      <!-- 表格 -->
      <el-table v-loading="loading" :data="categoryList" style="width: 100%">
        <el-table-column prop="categoryId" label="商品类别ID" :sortable="true" align="center" />
        <el-table-column prop="categoryName" label="商品类别名称" align="center">
          <template v-slot="scope">
            <el-tag type="info">
              {{ scope.row.categoryName }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="400">
          <template v-slot="scope">
            <el-button type="primary" @click="modifyCategory(scope.row.categoryId)" size="small">修改</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination background layout="prev, pager, next" :total="config.total" class="pager mt-4"
        @current-change="changePage" :page-size="config.size" />
    </div>
  </el-card>

  <!-- 查看商店详情的模态框 -->
  <el-dialog v-model="dialogVisible" title="新增商品类别" width="38%">
    <el-input v-model="newCategoryName" type="text" placeholder="请输入商品类别名称"></el-input>
    <!-- 底部的按钮 -->
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="addNewCategory">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ElMessage } from 'element-plus';
import { getCurrentInstance, onMounted, ref, reactive } from 'vue'

const { proxy } = getCurrentInstance();

const categoryList = ref([]);
// 控制模态框的显示和隐藏
const dialogVisible = ref(false)
// 控制表格加载遮罩窗是否出现
const loading = ref(false);
const newCategoryName = ref('')
const config = reactive({
  total: 0,  // 总的条目数
  current: 1,  // 当前页
  size: 15  // 一页的条目数
})

const getPageOfCategory = async () => {
  // 发起请求
  let res = await proxy.$api.category.getAllCategory({
    current: config.current,
    size: config.size,
  });
  // 更新表格数据
  categoryList.value = res.data.categoryPage;
  config.total = res.data.total;
}

const changePage = async (page) => {
  loading.value = true;
  // 更新当前页码
  config.current = page
  await getPageOfCategory()
  loading.value = false;
}

/**
 * 新增商品类别
 */
const addNewCategory = async () => {
  let res = await proxy.$api.category.addNewCategory({
    "categoryId": "0",
    "categoryName": newCategoryName.value
  });
  if (res.status === 200) {
    ElMessage.success({ showClose: true, message: "成功添加了一个新的商品类别" });
    newCategoryName.value = '';
  }
  dialogVisible.value = false;
  loading.value = true;
  await getPageOfCategory();
  loading.value = false;
}

/**
 * 修改商品类别
 */
const modifyCategory = async (categoryId) => {
  let ret;
  try {
    ret = await ElMessageBox.prompt('请输入新的商品类别名称', '修改类别', {
      confirmButtonText: '保存',
      cancelButtonText: '取消',
    });
  } catch (error) {
    console.log(error);
    return;
  }
  if (ret.value && ret.value.length > 0) {
    loading.value = true;
    let res = await proxy.$api.category.modifyCategory({
      "categoryId": categoryId,
      "categoryName": ret.value,
    });
    if (res.status === 200) {
      ElMessage.success("成功修改商品类别");
      await getPageOfCategory();
      loading.value = false;
    }
  } else {
    ElMessage.error("请输入商品类别名称");
  }
}

onMounted(async () => {
  // 开启加载遮罩
  loading.value = true;
  await getPageOfCategory();
  // 关闭加载遮罩
  loading.value = false;
});
</script>

<style lang="less" scoped>
.table {

  .pager {
    position: relative;
    bottom: -15px;
    justify-content: flex-end;
    margin-right: 15px;
    margin-top: 10px;
    margin-bottom: 15px;
  }
}
</style>